<template>
  <div class="clearfix">
    <Header />
    <Banner />
    <div class="clearfix bg-gray">
      <div class="con-width-1200 one-block pos-rel clearfix">
        <div class="list clearfix">
          <Ul class="clearfix pos-rel img-focus" v-bind:class="{ show: scrollFlag }">
            <li v-for="(item, index) in oneBlock" :key="index" class="clearfix fxl">
              <div class="con bg-white box-shadow clearfix" :class="item.cls" @click="jumpArticleList(item.channelCode)">
                <i class="iconfont" :class="item.titleImg"></i>
                <h2>{{ item.title }}</h2>
                <p>{{ item.en }}</p>
              </div>
            </li>
          </Ul>
        </div>
      </div>

      <div class="con-width-1200 bg-white clearfix">
        <div class="pad15 clearfix">
          <div class="fxl two-block clearfix" v-for="(gonggao, index) in gonggaos" :key="index">
            <div class="clearfix" :class="{ padding20R: index != 2 }">
              <div class="tit clearfix">
                <h1 class="fxl">{{ gonggao.title }}</h1>
                <p class="fxr more" @click="jumpArticleList(gonggao.channelCode)">
                  MORE+
                </p>
              </div>
              <img class="img" :src="gonggao.titleImg" />
              <ul class="li-list clearfix">
                <li class="pos-rel text-wid" v-for="(item, index) in gonggao.sunList" :key="index">
                  <a @click="jump(item.id, 'Article')">
                    <img class="fxl new-img" src="../assets/images/new.png" v-if="index == 0" width="10%" />
                    <span class="fxl">{{ item.title | ellipsis }}</span>
                  </a>
                  <span class="pos-abs">{{ item.releaseDate }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="clear hei30"></div>
    </div>
    <div class="clear hei40"></div>
    <div class="clearfix three-block con-width-1200">
      <div class="fxl clearfix">
        <div class="tit-one clearfix">
          <h1>科室导航</h1>
          <h2>Department navigation</h2>
        </div>
        <div class="clear hei10"></div>
        <div class="clearfix img1 rad5 pos-rel" :style="{
          background: 'url(' + currentDeptsImg + ') no-repeat center center',
        }">
          <div class="pos-abs font">
            <H1>{{ currentDepts }}</H1>
            <h2>{{ currentDeptsContent }}</h2>
          </div>
        </div>
      </div>
      <div class="fxr r-list clearfix">
        <div class="clearfix margin10B" v-for="(dept, index) in depts" :key="index">
          <div class="tit clearfix">
            <h1 class="pos-rel">{{ dept.title }}</h1>
          </div>
          <div class="clear hei10"></div>
          <ul class="li-block clearfix">
            <li v-for="(item, index) in dept.sunList" :key="index">
              <span @mouseover="currentDept(item)" @click="jump(item.id, 'Article')">{{ item.title }}</span>
            </li>
          </ul>
          <div class="clear hei10"></div>
        </div>
      </div>
    </div>

    <div class="clear hei40"></div>

    <!-- 特色医疗 -->
    <div class="bg-gray four-block clearfix">
      <div class="con-width-1220 clearfix">
        <div v-for="(characteristic, index) in characteristics" :key="index">
          <div class="tit clearfix">
            <h1>{{ characteristic.title }}</h1>
            <h2>{{ characteristic.channelNameEn }}</h2>
          </div>
          <div class="clear hei10"></div>
          <Ul class="img-list clearfix">
            <li class="clearfix" v-for="(item, index) in characteristic.sunList" :key="index">
              <div class="con pos-rel clearfix" @click="jump(item.id, 'Article')">
                <img class="img" :src="item.titleImg" />
                <div class="pos-abs title pad10">
                  {{ item.title }}
                </div>
              </div>
            </li>
          </Ul>
        </div>
      </div>
    </div>

    <div class="bg-white four-block clearfix">
      <div class="con-width-1200 clearfix">
        <div class="tit clearfix">
          <h1>方位指南</h1>
          <h2>Directions Guide</h2>
        </div>
        <div class="clear hei30"></div>
        <div class="img-address pos-rel clearfix">
          <!-- <img src="../assets/images/adress.jpg"> -->
          <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
            <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @click="infoWindowOpen">
              <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen"></bm-info-window>
            </bm-marker>
          </baidu-map>
          <ul class="font pos-abs">
            <pre>北京丰台右安门医院</pre>
            <li class="clearfix">
              <i class="fxl iconfont fs-12 icon-dizhi"></i>
              <span class="fxl">地址：北京市丰台区右安门外大街199号</span>
            </li>
            <li class="clearfix">
              <i class="fxl iconfont fs-12 icon-youbian"></i>
              <span class="fxl">邮编：100069</span>
            </li>
            <li class="clearfix">
              <i class="fxl iconfont fs-12 icon-dianhua"></i>
              <span class="fxl">服务热线：</span>
              <span class="fxl">
                010－83322000、83322548(咨询); 83322619(投诉)
                <div class="clear hei5"></div>
                8:00-11:30,13:30-17:00（工作日）
              </span>
            </li>
            <li class="clearfix">
              <i class="fxl iconfont fs-12 icon-gongjiao"></i>
              <div class="fxl" style="width: 300px; line-height: 22px; margin-top: -3px">
                <span class="fxl">公交线路：</span>
                <div class="clear h5"></div>
                <span class="fxl">
                  乘19、377、454、474、48、特17、88在翠林小区站下车右
                  外斜街路口西100米，乘300、324、368、运通103、运通108、
                  特8路到草桥下车，往北过铁路500米右外斜街即到
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "./Header.vue";
import Footer from "./Footer.vue";
import Banner from "./Banner.vue";
import _http from "../httpService";

export default {
  name: "Pc",
  props: {
    msg: String,
  },
  components: {
    Header,
    Footer,
    Banner,
  },
  data() {
    return {
      scrollFlag: false,
      show: false,
      center: { lng: 0, lat: 0 },
      zoom: 3,
      currentDepts: "",
      currentDeptsContent: "",
      currentDeptsImg: null,
      mark: 0,
      oneBlock: [],
      gonggaos: [],
      depts: [],
      characteristics: [],
      isDisable: false,
      name: "",
      mobile: "",
      content: "",
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    infoWindowClose() {
      this.show = false;
    },
    handleScroll() {
      let _this = this;
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop)
      if (scrollTop) {
        _this.scrollFlag = true;
      } else {
        _this.scrollFlag = false;
      }
    },

    infoWindowOpen() {
      this.show = true;
    },

    jump: function (id, url) {
      this.$router.push({ path: "/" + url + "/" + id });
    },
    jumpArticleList: function (id) {
      this.$router.push({ path: "/ArticleList?channelCode=" + id });
    },
    currentDept: function (item) {
      console.log(this.currentDepts);

      if (item.titleImg != null) {
        this.currentDepts = item.title;
        this.currentDeptsContent = item.shortTitle;
        this.currentDeptsImg = item.titleImg;
      }
    },

    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.368475;
      this.center.lat = 39.865296;
      this.zoom = 17;
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 16) {
        return value.slice(0, 16) + "...";
      }
      return value;
    },
  },
  created() {
    // 初始化加载栏目等数据
    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=notice")
      .then((response) => {
        console.log(response);
        this.gonggaos = [];
        response.data.result.records.forEach((element) => {
          this.gonggaos.push({
            title: element.title,
            channelCode: element.channelCode,
            titleImg: element.titleImg,
            sunList: element.contentList,
          });
        });
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));

    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=fastNavigation")
      .then((response) => {
        this.oneBlock = [];

        response.data.result.records.forEach((element) => {
          this.oneBlock.push({
            title: element.title,
            titleImg: element.titleImg,
            channelCode: element.channelCode,
            cls: element.contentImg,
            en: element.channelNameEn,
            sunList: element.contentList,
          });
        });
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));

    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=deptNavigation")
      .then((response) => {
        console.log(response);
        this.depts = [];
        response.data.result.records.forEach((element) => {
          this.depts.push({
            title: element.title,
            sunList: element.contentList,
          });
        });

        this.currentDepts =
          response.data.result.records[0].contentList[0].title;
        this.currentDeptsImg =
          response.data.result.records[0].contentList[0].titleImg;
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));

    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=characteristics ")
      .then((response) => {
        console.log(response);
        this.characteristics = [];
        response.data.result.records.forEach((element) => {
          this.characteristics.push({
            title: element.title,
            channelNameEn: element.channelNameEn,
            sunList: element.contentList,
          });
        });
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/public.css";

.map {
  width: 1200px;
  height: 400px;
}

.one-block {
  .list {
    padding: 40px 0px;

    ul {
      li {
        position: relative;
        height: 100%;
        width: 25%;
        cursor: pointer;
        text-align: center;
        color: #797979;

        .con {
          padding: 50px 0px;
          margin-right: 12px;

          h2 {
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            padding: 11px 0px 0px;
          }

          i {
            display: block;
            height: 70px;
            font-size: 70px;
          }

          p {
            font-size: 14px;
            line-height: 25px;
            height: 25px;
            font-weight: bold;
          }
        }
      }

      li:last-child {
        .con {
          margin: 0px;
        }
      }

      li:last-child {
        border: 0px;
      }

      li.focus {
        position: relative;
        border: 0px;
        color: #fff;

        i,
        p {
          color: #fff;
        }
      }
    }
  }
}

.two-block {
  width: 33.3%;

  .tit {
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;

    h1 {
      font-size: 16px;
      color: #222;
    }

    .more {
      cursor: pointer;
      line-height: 25px;
      color: #424852;
    }
  }

  .img {
    width: 100%;
    height: 200px;
  }

  .li-list {
    font-size: 14px;

    li {
      cursor: pointer;
      text-align: left;
      padding: 8px 50px 4px 0px;
      color: #333;

      span {
        right: 0px;
        color: #444;
      }
    }

    li:hover {
      color: #0eb4b6;
      text-decoration: underline;
    }
  }
}

.three-block {
  .tit-one {
    text-align: left;

    h1 {
      font-size: 18px;
      color: #343434;
    }

    h2 {
      color: #999;
      font-size: 14px;
    }
  }

  .img1 {
    margin-top: 12px;
    height: 350px;
    width: 420px;
    background: url("../assets/images/20200513110635616.jpg") no-repeat center center;
    background-size: auto 100% !important;
  }

  .font {
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 10px 10px 20px 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: left;

    h1 {
      font-size: 20px;
      font-weight: normal;
      line-height: 40px;
    }

    h2 {
      font-size: 14px;
      font-weight: normal;
      line-height: 25px;
    }
  }

  .r-list {
    width: 770px;

    .tit {
      border-bottom: 1px solid #dee4ec;
      margin: 0px 0px 5px 10px;

      h1 {
        font-size: 18px;
        color: #343434;
        line-height: 30px;
        height: 30px;
        padding-bottom: 10px;
        text-align: left;
      }

      h1:before {
        content: "";
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        border-radius: 5px 10px 0px 0px;
        height: 3px;
        width: 80px;
        background: #4cc6c8;
      }
    }

    .li-block {
      li {
        cursor: pointer;
        float: left;
        width: 16.66%;
        margin: 10px 0px 0px 0px;

        span {
          display: block;
          margin-left: 10px;
          padding: 5px 0px;
          border: 1px solid #e9ebf0;
          font-size: 14px;
          text-align: center;
        }
      }

      li:hover {
        span {
          background: #4fc9ca;
          color: #fff;
          border: 1px solid #4fc9ca;
        }
      }
    }
  }
}

.four-block {
  padding: 30px 0px;

  .tit {
    h1 {
      font-size: 20px;
      line-height: 40px;
      text-align: center;
    }

    h2 {
      font-size: 16px;
      color: #999;
      text-align: center;
    }
  }

  .img-list {
    li {
      cursor: pointer;
      float: left;
      width: 33.33%;

      .con {
        margin: 8px;

        .img {
          width: 100%;
          height: 260px;
        }

        .title {
          left: 0px;
          right: 0px;
          bottom: 2px;
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          font-size: 18px;
          text-align: center;
          font-weight: bold;
          padding: 10px 0px;
        }
      }

      .con:hover {
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

        .title {
          display: block;
        }
      }
    }
  }

  .img-address {
    margin-top: 30px;

    .font {
      top: -50px;
      right: 50px;
      padding: 50px 10px 80px 50px;
      width: 400px;
      color: #fff;
      background: url(../assets/images/address_font.png);
      background-repeat: no-repeat;

      pre {
        text-align: left;
        font-size: 26px;
        line-height: 60px;
        margin-bottom: 10px;
        font-weight: bold;
      }

      li {
        padding: 5px 0px;
        font-size: 12px;

        i {
          margin-right: 5px;
        }
      }

      span {
        text-align: left;
      }
    }
  }
}

.new-img {
  margin: 3px 3px 0px 0px;
}

.bg-color1 {
  background: #0eb4b6 !important;
  color: #fff;
}

.bg-color2 {
  background: #ddc890 !important;
  color: #fff;
}

.bg-color3 {
  background: url(../assets/images/bg3.jpg) !important;
  background-size: 100% 100% !important;
  color: #000;
}

.bg-color4 {
  background: #33cb11 !important;
  color: #fff;
}

.bg-color5 {
  background: #649ea2 !important;
  color: #fff;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}

.one-block .list ul.show li:hover .con i {
  animation: rot 0.5s;
  -webkit-animation: rot 0.5s;
}

.img-focus li {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 0;
}

.img-focus li:nth-child(1) {
  transform: translateX(-30px);
  -webkit-transform: translateX(-30px);
}

.img-focus li:nth-child(2) {
  transform: translateX(-80px);
  -webkit-transform: translateX(-80px);
}

.img-focus li:nth-child(3) {
  transform: translateX(-130px);
  -webkit-transform: translateX(-130px);
}

.img-focus li:nth-child(4) {
  transform: translateX(-180px);
  -webkit-transform: translateX(-180px);
}

.img-focus.show li {
  opacity: 1 !important;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
</style>
